
<template>

<!--  <a-modal-->
<!--    v-model="show"-->
<!--    :width="900"-->
<!--    :keyboard="false"-->
<!--    :closable="false"-->
<!--    :centered="true"-->
<!--    @ok="ok"-->
<!--    @cancel="cancel"-->
<!--    :maskClosable="false"-->
<!--    :mask="false"-->
<!--    okText="确认"-->
<!--    cancelText="取消">-->



<!--    <p>dddd</p>-->


<!--  <a-col :span="24">-->
<!--    <a-form-item label="创建者" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--      <a-input v-decorator="['createUser', validatorRules.createUser]" placeholder="请输入创建者"></a-input>-->
<!--    </a-form-item>-->
<!--  </a-col>-->
<!--  <a-col :span="24">-->
<!--    <a-form-item label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--      <j-date placeholder="请选择创建时间" v-decorator="['createTime', validatorRules.createTime]" :trigger-change="true" style="width: 100%"/>-->
<!--    </a-form-item>-->
<!--  </a-col>-->
<!--  <a-col :span="24">-->
<!--    <a-form-item label="更新者" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--      <a-input v-decorator="['updateUser']" placeholder="请输入更新者"></a-input>-->
<!--    </a-form-item>-->
<!--  </a-col>-->
<!--  <a-col :span="24">-->
<!--    <a-form-item label="更新时间" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
<!--      <j-date placeholder="请选择更新时间" v-decorator="['updateTime']" :trigger-change="true" style="width: 100%"/>-->
<!--    </a-form-item>-->
<!--  </a-col>-->


<!--  </a-modal>-->


  <div>
    <input class="form-control autoSelect" type="text" @mouseup="mouse" @keyup="loadOptions" v-model="selectContent" />
    <div class="autoSelectDiv" isHover="false" v-show="isShow">
      <ul>
        <li v-for="dataItem in selectList" @click="selectItem(dataItem)">{{dataItem.vName}}</li>
      </ul>
    </div>
  </div>
  </template>

<script type="text/javascript">
  export default {
    name: 'autoSelect',
    props: {
      //父级传过来的默认被选中的值
      name: {
        type: String,
        default: ''
      },
      url: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        returnContent: { selectedId: '', flag: 0, selectContent: '' },//我多个地方调用了下拉菜单，所以加了一个flag区分
        selectList: [],
        isShow: false
      }
    },
    mounted() {
      //点击其他地方，隐藏下拉菜单
      this.bodyLister = (e) => {
        if (this.isShow == true) {
          this.isShow = false;
        }
      }
      document.addEventListener('click', this.bodyLister);
    },
    watch: {
      name: {
        handler: function(newValue, oldValue) {
          this.returnContent.selectContent = newValue;
        }
      }
    },
    methods: {
      selectItem(data) {
        this.returnContent.selectedId = data.vCode;
        this.returnContent.selectContent = data.vName;
        this.isShow = false;
        this.$emit('getAutoSelectResult', this.returnContent);
      },
      mouse() {  //点击输入框时就发送请求
        if (this.selectContent == "") {
          this.loadOptions();
        }
      },
      loadOptions() {
        var _this = this;
        var parameter = {};
        switch (_this.url) {
          case 'url1':
            parameter['param1'] = '要传的参数1';
            this.returnContent.flag = 1;
            break;
          case 'url2':
            parameter['param2'] = '要传的参数2';
            this.returnContent.flag = 2;
            break;

        }
        parameter['name'] = this.returnContent.selectContent;
        //请求接口去吧
        doRequest(url, parameter, function(result) {
          for (var i = 0; i < result.length; i++) {
            _this.selectList.push({ vCode: obj[i].value, vName: obj[i].name });
          }
          _this.isShow = true;
        })
      }
    }
  }
  </script>